<template>
  <div style="margin-bottom:5px;">
    <div class="left-col">{{ name }}</div>
    <div class="right-col filter-list-wrapper">
      <ul class="filter-list">
        <li
          v-if="!hideAll"
          class="filter-all"
          :class="{ selected: Object.keys(value).length === 0 }"
        >
          <span @click="onSelect()">å…¨éƒ¨</span>
        </li>
        <li
          class="group-filter-item"
          v-for="(item, index) in limitList"
          :key="index"
          :class="{ selected: value[item.value] && value[item.value].length > 0 }"
        >
          <span class="group-filter-name"
            >{{ item.label }}
            <em v-if="value[item.value] && value[item.value].length > 0"
              >({{ (value[item.value] && value[item.value].length) || 0 }})</em
            ><i class="el-icon-caret-bottom"></i
          ></span>
          <div class="filter-sub-wrapper">
            <span
              v-for="(child, cindex) in item.children || []"
              :key="cindex"
              :class="{ selected: selectedObj[item.value + '_' + child.value] }"
              @click="onSelect(item, child)"
              >{{ child.label }}</span
            >
          </div>
        </li>
        <li
          class="filter-more"
          :class="{ 'more-selected': checkedValue.length > 0 }"
          v-popover:popover
        >
          <span
            >æ›´å¤š <em v-if="checkedValue.length > 0">({{ checkedValue.length }})</em
            ><i class="el-icon-d-arrow-left" :class="{ rotate: show }"></i>
          </span>
        </li>
      </ul>
    </div>
    <el-popover
      ref="popover"
      v-model="show"
      popper-class="filter-more-group-popover"
      placement="bottom"
      trigger="click"
    >
      <v-more-group-filter
        :list="checkOptions"
        :value.sync="checkedValue"
        @onChange="onChange"
      ></v-more-group-filter>
    </el-popover>
  </div>
</template>
<script>
import vMoreGroupFilter from './MoreGroupFilter';
export default {
  props: ['name', 'list', 'value', 'limitCount', 'limitSelectCount', 'hideAll'],
  components: { vMoreGroupFilter },
  data() {
    return {
      selectedObj: {},
      preCheckedValue: [],
      checkedValue: [],
      show: false
    };
  },
  mounted() {
    this.setDefaultSelected();
  },
  computed: {
    limitList() {
      return this.list.slice(0, this.limitCount);
    },
    checkOptions() {
      return this.list.slice(this.limitCount || this.list.length);
    }
  },
  watch: {
    value() {
      this.setDefaultSelected();
    }
  },
  methods: {
    onChange(values) {
      let preCheckedObj = {};
      let curCheckedObj = {};
      this.preCheckedValue.forEach(value => {
        preCheckedObj[value[0] + '_' + value[1]] = value;
      });
      values.forEach(value => {
        let key = value[0] + '_' + value[1];
        if (!preCheckedObj[key]) {
          this.onSelect({ value: value[0] }, { value: value[1] });
        }
        curCheckedObj[key] = value;
      });
      this.preCheckedValue.forEach(value => {
        let key = value[0] + '_' + value[1];
        if (preCheckedObj[key] && !curCheckedObj[key]) {
          this.onSelect({ value: value[0] }, { value: value[1] });
        }
      });
      this.preCheckedValue = values.slice(0);
    },
    setDefaultSelected() {
      this.selectedObj = {};
      Object.keys(this.value || {}).forEach(key => {
        this.selectedObj[key] = {};
        (this.value[key] || []).forEach(item => {
          this.selectedObj[key + '_' + item] = true;
        });
      });
    },
    onSelect(item, child) {
      if (!item || !child) {
        this.$emit('update:value', {});
        this.selectedObj = {};
      } else {
        if (!this.value[item.value]) {
          this.$set(this.value, item.value, []);
        }
        let key = item.value + '_' + child.value;
        if (this.selectedObj[key]) {
          let index = this.value[item.value].indexOf(child.value);
          this.value[item.value].splice(index, 1);
        } else {
          this.value[item.value].push(child.value);
        }
        this.$set(this.selectedObj, key, !this.selectedObj[key]);
      }
      console.log('filter', this.name, JSON.stringify(this.value));
      this.$emit('onChange');
    }
  }
};
</script>
